﻿var display =
{
/*成员*/
    callback: null,      //点击色块回调函数
/*常量*/
    BlockXOffset: 50,
    FileName_Previous: "Previous.png",
    FileName_PreviousHover: "PreviousHover.png",
    FileName_Next: "Next.png",
    FileName_NextHover: "NextHover.png",
/*变量*/
    table: null,
    previous: null,
    next:null,

/*接口*/
    /**
      * @name 初始化
      * @param {function} callback 回调函数，function(color)
    */
    initial:function(callback)
    {
        this.callback = callback;

        this.table = document.getElementById("display_table");

        var that = this;

        this.previous = document.getElementById("display_previous");
        this.previous.onmouseenter = function ()
        {
            if(that.table.lineIndex!=0)
                this.src = Path_Icon + that.FileName_PreviousHover;
        }
        this.previous.onmouseleave = function ()
        {
            this.src = Path_Icon + that.FileName_Previous;
        }
        this.previous.onclick = function ()
        {
            that.table.style.top = "0";
            if (that.table.lineIndex > 0)
            {
                that.table.lineIndex--;
                that.table.style.top = that.table.lineIndex * (-100) + "%";
                
                that.slideControl();
            }
        }
        this.next = document.getElementById("display_next");
        this.next.onmouseenter = function ()
        {
            if (that.table.lineIndex != that.table.lineNumber - 1)
                this.src = Path_Icon + that.FileName_NextHover;
        }
        this.next.onmouseleave = function ()
        {
            this.src = Path_Icon + that.FileName_Next;
        }
        this.next.onclick = function ()
        {
            if (that.table.lineIndex < that.table.lineNumber -1 )
            {
                that.table.lineIndex++;
                that.table.style.top = that.table.lineIndex * (-100) + "%";

                that.slideControl();
            }
        }
    },
    /**
      * @name 装载颜色
      * @param {Array} colors 颜色数组，{r,g,b}
    */
    loadColors:function(colors)
    {
        this.table.innerHTML = "";
        for(var i=0;i<colors.length;i++)
        {
            var div = document.createElement("div");
            div.that = this;
            div.className = "Display_Block";
            div.style.backgroundColor = "rgb(" + colors[i].r + "," + colors[i].g + "," + colors[i].b + ")";
            div.color = colors[i];
            div.onclick = this.block_handlerClick;

            this.table.appendChild(div);
        }

        this.table.lineNumber = Math.ceil(colors.length / 6);
        this.table.lineIndex = 0;
        this.slideControl();
    },

/*内部*/
    /** 
      * @name block点击事件处理
    */
    block_handlerClick:function()
    {
        this.that.callback(this.color);
    },
    /*
     *
    */
    slideControl:function()
    {
        var number = this.table.lineNumber;
        var index = this.table.lineIndex;

        if (number > 1)
        {
            this.previous.style.display = "block";
            this.next.style.display = "block";

            if (index == 0)
            {
                this.previous.className = "Display_SlideUnable";
                this.next.className = "Display_SlideEnable";
            }        
            else if (index == number - 1)
            {
                this.previous.className = "Display_SlideEnable";
                this.next.className = "Display_SlideUnable";
            }
            else
            {
                this.next.className = "Display_SlideEnable";
                this.previous.className = "Display_SlideEnable";
            }
        }
        else
        {
            this.previous.style.display = "none";
            this.next.style.display = "none";
        }
    }
};